<!DOCTYPE html>
<html lang=zh-CN>

    <head>
        <meta charset=utf-8>
        <meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport
            content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
        <title></title>
        <style type="text/css">
            body {
                position: absolute;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .wrapper {
                width: 500px;
                height: 500px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -200px;
                margin-left: -500px;
                text-align: center;
            }

            .barcode-image {
                display: inline-block;
                vertical-align: middle;
                width: 200px;
                height: 200px;
            }

            .list {
                width: 500px;
            }

            .h5-viwer-box {
                position: absolute;
                width: 45vh;
                height: 80vh;
                right: 50px;
                top: 8vh;
                box-sizing: content-box;
                border: solid 10px #000000;
                border-radius: 10px;
                box-shadow: #DDDDDD 10px 10px 20px;
            }

            .h5-viwer {
                width: 45vh;
                height: 80vh;
                border: 0;
                padding: 0;
            }

            .h5-copy-link {
                position: absolute;
                width: 45vh;
                height: 40px;
                right: 50px;
                bottom: 4vh;
                text-align: center;
            }

            #copy-link-btn {
                display: inline-block;
                width: 100px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                border-radius: 6px;
                color: white;
                font-size: 16px;
                cursor: pointer;
                user-select: none;
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                background-color: #42b983;
            }

            #copy-link-btn:active {
                opacity: 0.7;
            }

            #copy-link-tooltip {
                position: absolute;
                width: 100px;
                height: 30px;
                left: 50%;
                top: 5px;
                margin-left: 120px;
                line-height: 30px;
                color: white;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 6px;
                opacity: 0;
                transition: all 0.3s ease;
                -ms-transition: all 0.3s ease;
                -moz-transition: all 0.3s ease;
                -webkit-transition: all 0.3s ease;
            }


            #copy-link-tooltip:after {
                content: "";
                position: absolute;
                width: 0;
                height: 0;
                right: 100%;
                top: 50%;
                margin-top: -8px;
                border: solid 8px transparent;
                border-right: solid 8px rgba(0, 0, 0, 0.5);
            }

            #copy-link-tooltip.show {
                opacity: 1;
                transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                -moz-transform: translateX(-50px);
                -webkit-transform: translateX(-50px);
            }
        </style>
    </head>

    <body>
        <div class="wrapper">
            <canvas id="canvas" class="barcode-image"></canvas>
            <div class="list">
                <p class="list-cell">请使用手机浏览器，扫描上方二维码浏览。</p>
            </div>
        </div>
        <div class="h5-viwer-box">
            <iframe id="iframe" class="h5-viwer" src="" width="414" height="736"></iframe>
        </div>
        <script src="https://unpkg.com/qrcode@1.4.4/build/qrcode.min.js"></script>
        <script>
            var src = decodeURIComponent(location.hash.replace(/^#/, ''))
            if(!/^https?:\/\//.test(src)) {
                src = 'https://uniapp.dcloud.io/h5/'
            }
            document.getElementById('iframe').src = src
            QRCode.toCanvas(document.getElementById('canvas'), src)
            var userAgent = navigator.userAgent
            window.addEventListener('resize', function() {
                if(navigator.userAgent !== userAgent) {
                    location.replace(src)
                }
            })
        </script>
    </body>

</html>